<!--
 * @Description: OSPF 区域新建
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-10-12 16:06:01
 * @LastEditTime: 2021-11-05 09:39:37
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <div class="page-content">
    <div class="info">
      <h1 class="title">{{diagTitle}}</h1>
      <!-- 新建OSPF -->
      <el-form
        ref="areaForm"
        :model="form"
        :rules="rules"
        label-width="140px"
        label-position="right"
        class="form"
      >
        <el-form-item
          label="实例ID"
          prop="instanceId"
          :rules="{required: true, message: '请检查必填项！', trigger:'blur'}"
        >
          <el-col :xs="24" :sm="12" :lg="6">
            <el-select
              v-model="form.instanceId"
              style="width:100%;"
              :disabled="form.id ? true : false"
            >
              <el-option
                v-for="(item, index) in insDatas"
                :key="index"
                :value="item.instanceId"
                :label="item.instanceId"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item
          label="区域ID"
          prop="areaId"
          :rules="{required: true, message: '请检查必填项！', trigger:'blur'}"
        >
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input-number
              :min="0"
              :max="4294967295"
              v-model="form.areaId"
              placeholder="范围：0-4294967295"
              :disabled="form.id ? true : false"
            ></el-input-number>
          </el-col>
        </el-form-item>
        <el-form-item label="区域类型" prop="areaType" @change="changeAreaType">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-select v-model="form.areaType" style="width:100%;" :disabled="true">
              <el-option
                v-for="(item, index) in areaTypeList"
                :key="index"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="入方向过滤" prop="inFilter" :rules="{ message: '请检查必填项！', trigger:'blur'}">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-select v-model="form.inFilter" style="width:100%;" clearable>
              <el-option
                v-for="(item, index) in preList"
                :key="index"
                :value="item.name"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="出方向过滤" prop="outFilter" :rules="{ message: '请检查必填项！', trigger:'blur'}">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-select v-model="form.outFilter" style="width:100%;" clearable>
              <el-option
                v-for="(item, index) in preList"
                :key="index"
                :value="item.name"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="认证" prop="areaAuth">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-select v-model="form.areaAuth" style="width:100%;">
              <el-option
                v-for="(item, index) in areaAuthList"
                :key="index"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <!-- <el-form-item
          label="区域认证密钥"
          prop="areaKey"
          v-if="form.areaAuth === 'MD5' || form.areaAuth === 'Simple'"
          :rules="{required: true, message: '请检查必填项！', trigger:'blur'}"
        >
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input v-model="form.areaKey" placeholder="请输入1-31个字符"></el-input>
          </el-col>
        </el-form-item>-->
        <!-- <el-form-item
          label="key-id"
          prop="md5KeyId"
          v-if="form.areaAuth === 'MD5'"
          :rules="{required: true, message: '请检查必填项！', trigger:'blur'}"
        >
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input-number
              :min="1"
              :max="255"
              v-model="form.md5KeyId"
              placeholder="范围：1-255"
              :disabled="form.id ? true : false"
            ></el-input-number>
          </el-col>
        </el-form-item>-->
        <!-- network配置 -->
        <el-form-item label="network配置" prop="networkEnble" v-if="form.id">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-switch v-model="form.networkEnble"></el-switch>
          </el-col>
        </el-form-item>
        <template v-if="form.networkEnble">
          <el-form-item label="network列表">
            <el-button icon="el-icon-plus" type="text" @click="networkStatus = true">添加</el-button>
            <el-table
              border
              :data="networkList"
              class="ip-table"
              style="width: 100%"
              height="300px"
            >
              <!-- IP地址 -->
              <el-table-column label="IP地址" align="center" min-width="150">
                <template slot-scope="scope">
                  <span>{{scope.row.ipAddress ? scope.row.ipAddress : '-'}}</span>
                </template>
              </el-table-column>
              <!-- IP反掩码 -->
              <el-table-column label="IP反掩码" align="center" min-width="150px">
                <template slot-scope="scope">
                  <span>{{scope.row.wildcardMask ? scope.row.wildcardMask : '-'}}</span>
                </template>
              </el-table-column>
              <!-- 操作 -->
              <el-table-column fixed="right" align="center" label="操作" width="80px">
                <!-- 删除 -->
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    style="color: #FA6962"
                    icon="el-icon-delete"
                    class="table-btn"
                    @click="handleDeleteIP('network',scope)"
                    v-power="scope.row.vrfId === $store.state.user.user.info.dgId ? 2 : 0"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </template>
        <!-- 接口配置  -->
        <el-form-item label="接口配置" prop="interfEnble" v-if="form.id">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-switch v-model="form.interfEnble"></el-switch>
          </el-col>
        </el-form-item>
        <template v-if="form.interfEnble">
          <el-form-item label="接口列表">
            <el-button icon="el-icon-plus" type="text" @click="interfStatus = true">添加</el-button>
            <el-table border :data="interfList" class="ip-table" style="width: 100%" height="300px">
              <!-- 实例ID -->
              <el-table-column label="实例ID" align="center" width="150">
                <template slot-scope="scope">
                  <span>{{scope.row.instanceId ? scope.row.instanceId : '-'}}</span>
                </template>
              </el-table-column>
              <!-- 接口名称 -->
              <el-table-column label="接口名称" align="center" min-width="150px">
                <template slot-scope="scope">
                  <span>{{scope.row.intfOid ? dealPortName(scope.row.intfOid) : '-'}}</span>
                </template>
              </el-table-column>
              <!-- 接口优先级 -->
              <el-table-column label="接口优先级" align="center" width="150px">
                <template slot-scope="scope">
                  <span>{{scope.row.priority ? scope.row.priority : '-'}}</span>
                </template>
              </el-table-column>
              <!-- 网络类型 -->
              <el-table-column label="网络类型" align="center" min-width="150px">
                <template slot-scope="scope">
                  <span v-if="scope.row.networkType === 'Broadcast'">广播型多路访问网络</span>
                  <span v-if="scope.row.networkType === 'Nbma'">非广播多路访问</span>
                  <span v-if="scope.row.networkType === 'Ptmp_Nb'">点到多点非广播多路访问</span>
                  <span v-if="scope.row.networkType === 'Point_To_Point'">点到点网络</span>
                  <span v-if="scope.row.networkType === 'Point_To_Multipoint'">点到多点网络</span>
                </template>
              </el-table-column>
              <!-- 网络类型 -->
              <el-table-column label="认证" align="center" width="100px">
                <template slot-scope="scope">
                  <span v-if="scope.row.authType === 'NA'">不使能</span>
                  <span v-if="scope.row.authType === 'Simple'">Simple</span>
                  <span v-if="scope.row.authType === 'MD5'">MD5</span>
                </template>
              </el-table-column>
              <!-- 操作 -->
              <el-table-column fixed="right" align="center" label="操作" width="80px">
                <!-- 删除 -->
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    style="color: #FA6962"
                    icon="el-icon-delete"
                    class="table-btn"
                    @click="handleDeleteIP('interf',scope)"
                    v-power="scope.row.vrfId === $store.state.user.user.info.dgId ? 2 : 0"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </template>
        <el-form-item>
          <el-button style="width: 90px" @click="cancel">返回</el-button>
          <el-button type="primary" style="width: 90px" @click="submitForm">{{form.id ? '保存': '创建'}}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 接口配置 -->
    <el-dialog
      v-if="interfStatus"
      title="接口配置"
      :close-on-click-modal="false"
      width="500px"
      :visible.sync="interfStatus"
    >
      <el-form ref="interfForm" :model="interfForm" label-width="120px" style="width:100%">
        <el-form-item
          label="实例ID"
          prop="instanceId"
          :rules="{required: true, message: '请检查必填项！', trigger:'blur'}"
        >
          <el-input v-model="interfForm.instanceId" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item
          label="接口名称"
          prop="intfOid"
          :rules="{required: true, message: '请检查必填项！', trigger:'blur'}"
        >
          <el-select
            v-model="interfForm.intfOid"
            style="width:100%;"
            placeholder="请选择接口名称"
            filterable
            clearable
          >
            <el-option
              v-for="(item, index) in intfOidList"
              :key="index"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="接口优先级" prop="priority">
          <el-input-number :min="0" :max="255" v-model="interfForm.priority" placeholder="范围：0-255"></el-input-number>
        </el-form-item>
        <el-form-item label="网络类型" prop="networkType">
          <el-select v-model="interfForm.networkType" style="width:100%;" placeholder="请选择网络类型">
            <el-option
              v-for="(item, index) in networkTypeList"
              :key="index"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="认证" prop="authType">
          <el-select v-model="interfForm.authType" style="width:100%;">
            <el-option
              v-for="(item, index) in interAuthList"
              :key="index"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="接口认证密钥"
          prop="authKey"
          :rules="{ required: true,message: '请检查必填项！', trigger:'blur'}"
          v-if="interfForm.authType === 'MD5' || interfForm.authType === 'Simple'"
        >
          <el-input v-model="interfForm.authKey" placeholder="请输入1-31个字符"></el-input>
        </el-form-item>
        <el-form-item
          label="key-id"
          prop="md5KeyId"
          v-if="interfForm.authType === 'MD5'"
          :rules="{required: true, message: '请检查必填项！', trigger:'blur'}"
        >
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input-number
              :min="1"
              :max="255"
              v-model="interfForm.md5KeyId"
              placeholder="范围：1-255"
            ></el-input-number>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <!--取 消  确 定-->
        <el-button @click="cancelIP('interf')">取消</el-button>
        <el-button type="primary" @click="submitIP('interf')">确认</el-button>
      </span>
    </el-dialog>
    <!-- netWork配置 -->
    <el-dialog
      v-if="networkStatus"
      title="netWork配置"
      :close-on-click-modal="false"
      width="500px"
      :visible.sync="networkStatus"
    >
      <el-form ref="netForm" :model="netForm" label-width="120px" style="width:100%">
        <el-form-item
          label="IP地址"
          prop="ipAddress"
          :rules="[
                  {required: true, message: '请检查必填项！',trigger: 'blur'},
                  { pattern: /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/, message: '格式不正确' ,trigger: 'blur'}
                ]"
        >
          <el-input v-model="netForm.ipAddress" placeholder="IP地址格式"></el-input>
        </el-form-item>
        <el-form-item
          label="IP反掩码"
          prop="wildcardMask"
          :rules="[
                  {required: true, message: '请检查必填项！',trigger: 'blur'},
                  { pattern: /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/, message: '格式不正确' ,trigger: 'blur'}
                ]"
        >
          <el-input v-model="netForm.wildcardMask" placeholder="IP反掩码"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <!--取 消  确 定-->
        <el-button @click="cancelIP('nework')">取消</el-button>
        <el-button type="primary" @click="submitIP('nework')">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ['ne', 'insDatas', 'row'],
  data () {
    return {
      diagTitle: '新建OSPF区域',
      form: {
        instanceId: null,
        areaId: 0,
        areaType: 'Normal',
        stubDefCost: 1,
        stubNoSum: false,
        nssaSuppress: false,
        nssaDefaultType7: false,
        nssaMetricEnable: true,
        nssaMetric: 1,
        nssaMetricType: 'NA',
        nssaNoRedi: false,
        nssaNoSum: false,
        nssaTransRole: 'Candidate',
        nssaTransStabIntv: 40,
        inFilter: null,
        outFilter: null,
        areaAuth: 'NA',
        interfEnble: false,
        areaKey: null,
        networkEnble: false,
        md5KeyId: null
      },
      rules: {},
      areaTypeList: [
        { value: 'Normal', label: '正常' },
        { value: 'Stub', label: '末梢区域' },
        { value: 'NSSA', label: '非纯末梢区域' },
      ],
      nssaMetricTypeList: [
        { value: 'NA', label: '不使能' },
        { value: 'Ext1', label: 'Ext1' },
        { value: 'Ext2', label: 'Ext2' },
      ],
      nssaTransRoleList: [
        { value: 'Always', label: 'Always' },
        { value: 'Candidate', label: 'Candidate' },
      ],
      areaAuthList: [
        { value: 'NA', label: '不使能' },
        { value: 'Simple', label: 'Simple' },
        { value: 'MD5', label: 'MD5' },
      ],
      interAuthList: [
        { value: 'NA', label: '不使能' },
        { value: 'Simple', label: 'Simple' },
        { value: 'MD5', label: 'MD5' },
      ],
      networkTypeList: [
        { value: 'Broadcast', label: '广播型多路访问网络' },
        { value: 'Nbma', label: '非广播多路访问' },
        { value: 'Ptmp_Nb', label: '点到多点非广播多路访问' },
        { value: 'Point_To_Point', label: '点到点网络' },
        { value: 'Point_To_Multipoint', label: '点到多点网络' }
      ],
      intfOidList: [],
      preList: [],
      page: {
        page: 1,
        pageSize: 15,
        total: 0
      },
      interfStatus: false,
      networkStatus: false,
      interfForm: {
        instanceId: null,
        intfOid: null,
        bfd: false,
        priority: 0,
        intfCost: 1,
        transmitDelay: 1,
        retransmitInterval: 5,
        intfTime: 10,
        mtuIgnore: false,
        intfDeadVal: 40,
        FastFlood: false,
        resyncTimeoutEnable: true,
        resyncTimeout: 1,
        ttlEnable: true,
        ttl: 1,
        authType: 'NA',
        authKey: null,
        frr: false,
        frrIntfOid: null,
        networkType: null,
        md5KeyId: null
      },
      interfList: [],
      networkList: [],
      netForm: {
        ipAddress: null,
        wildcardMask: null
      },
      // 是否可以进行分页
      filterText: ''
    };
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      _this.getInterName();
      _this.getPreList();
      _this.handleTable(_this.row);
    });
  },
  methods: {
    // 处理子表
    handleTable (row) {
      let _this = this;
      if (row && row.id) {
        _this.diagTitle = '编辑OSPF区域';
        _this.form = {
          id: row.id,
          instanceId: row.instanceId,
          areaId: row.areaId,
          areaType: row.areaType,
          stubDefCost: row.stubDefCost,
          stubNoSum: row.stubNoSum,
          nssaSuppress: row.nssaSuppress,
          nssaDefaultType7: row.nssaDefaultType7,
          nssaMetricEnable: row.nssaMetricEnable,
          nssaMetric: row.nssaMetric,
          nssaMetricType: row.nssaMetricType,
          nssaNoRedi: row.nssaNoRedi,
          nssaNoSum: row.nssaNoSum,
          nssaTransRole: row.nssaTransRole,
          nssaTransStabIntv: row.nssaTransStabIntv,
          inFilter: row.inFilter,
          outFilter: row.outFilter,
          areaAuth: row.areaAuth,
          areaKey: row.areaKey,
          interfEnble: false,
          networkEnble: false,
          // md5KeyId: row.md5KeyId
        };
        _this.interfForm.instanceId = _this.form.instanceId;
        if (row.intfs && row.intfs.length > 0) {
          _this.form.interfEnble = true;
          _this.interfList = row.intfs;
        }
        if (row.networks && row.networks.length > 0) {
          _this.form.networkEnble = true;
          _this.networkList = row.networks;
        }
      }
    },
    // 选择区域类型
    changeAreaType (val) {
      let _this = this;
      if (val === 'Stub') {
        _this.form.stubDefCost = _this.form.stubDefCost > 0 ? _this.form.stubDefCost : 1;
      }
    },
    // 选择NSSA区域-7型缺省路由通告Metric
    changeNssaMetricEnable (val) {
      let _this = this;
      if (val) {
        _this.form.nssaMetric = 1;
      } else {
        _this.form.nssaMetric = null;
      }
    },
    // 取消
    cancel () {
      let _this = this;
      _this.$emit('handleDiag', 0);
    },
    // 获取接口名称
    getInterName () {
      let _this = this;
      _this.$http.post({
        url: '/api/resource/nemng/command/' + _this.ne.id,
        data: {
          commandCode: 'intfselector.get',
          paras: {
            use: 'EthIntf',
            limit: _this.page.pageSize,
            offset: (_this.page.page - 1) * _this.page.pageSize
          }
        }
      }).then(res => {
        if (res.objects.length > 0) {
          let list = [];
          if (_this.ne.neLayer === 'Mixed') {
            for (let i = 0; i < res.objects.length; i++) {
              list.push({
                value: res.objects[i].oid,
                label: res.objects[i].name,
                userlabel: res.objects[i].userlabel,
                slot: res.objects[i].slot,
                port: res.objects[i].port,
                type: res.objects[i].type,
                tpAttrs: res.objects[i].tpAttrs,
              });
            }
            _this.intfOidList = list;
          } else {
            let lans = _this.ne.extAttrs.site.lans;
            for (let i = 0; i < res.objects.length; i++) {
              for (let k = 0; k < lans.length; k++) {
                let name = Number(lans[k].name.split('/')[1]);
                if (name === res.objects[i].port) {
                  list.push({
                    value: res.objects[i].oid,
                    label: res.objects[i].name,
                    userlabel: res.objects[i].userlabel,
                    slot: res.objects[i].slot,
                    port: res.objects[i].port,
                    type: res.objects[i].type,
                    tpAttrs: res.objects[i].tpAttrs,
                  });
                }
              }
            }
            _this.intfOidList = list;
          }
        }
      });
    },
    // 获取接口列表
    getPreList () {
      let _this = this;
      let params = {
        neId: _this.ne.id,
        limit: -1,
        offset: 0
      };
      _this.$http.post({
        url: '/api/sdwan/prefixlist/query',
        data: params
      }).then(res => {
        let { status, resultBody } = res;
        if (status === '0') {
          _this.page.total = resultBody.count;
          _this.preList = resultBody.objects;
        }
      });
    },
    cancelIP (type) {
      let _this = this;
      if (type === 'interf') {
        _this.interfStatus = false;
      } else {
        _this.networkStatus = false;
      }
    },
    submitIP (type) {
      let _this = this;
      if (type === 'interf') {
        _this.$refs['interfForm'].validate(valid => {
          if (valid) {
            _this.interfStatus = false;
            let interf = {
              id: _this.form.id,
              instanceId: _this.interfForm.instanceId,
              intfOid: _this.interfForm.intfOid,
              bfd: _this.interfForm.bfd,
              priority: _this.interfForm.priority > -1 ? _this.interfForm.priority : -1,
              intfCost: _this.interfForm.intfCost,
              transmitDelay: _this.interfForm.transmitDelay,
              retransmitInterval: _this.interfForm.retransmitInterval,
              intfTime: _this.interfForm.intfTime,
              mtuIgnore: _this.interfForm.mtuIgnore,
              intfDeadVal: _this.interfForm.intfDeadVal,
              FastFlood: _this.interfForm.FastFlood,
              resyncTimeout: _this.interfForm.resyncTimeoutEnable ? _this.interfForm.resyncTimeout : 0,
              ttl: _this.interfForm.ttlEnable ? _this.interfForm.ttl : 0,
              authType: _this.interfForm.authType,
              authKey: _this.interfForm.authKey,
              frr: _this.interfForm.frr,
              frrIntfOid: _this.interfForm.frrIntfOid,
              networkType: _this.interfForm.networkType,
              md5KeyId: _this.interfForm.md5KeyId
            };
            _this.interfList.push(interf);
            _this.clearData('interf');
          } else {
            _this.$message.error('请检查必填项！');
          }
        });
      } else {
        _this.$refs['netForm'].validate(valid => {
          if (valid) {
            _this.networkList.push({
              ipAddress: _this.netForm.ipAddress,
              wildcardMask: _this.netForm.wildcardMask
            });
            _this.networkStatus = false;
            _this.clearData('network');
          } else {
            _this.$message.error('请检查必填项！');
          }
        });
      }

    },
    clearData (type) {
      let _this = this;
      if (type === 'interf') {
        _this.interfForm = {
          instanceId: null,
          intfOid: null,
          bfd: false,
          priority: 0,
          intfCost: 1,
          transmitDelay: 1,
          retransmitInterval: 5,
          intfTime: 10,
          mtuIgnore: false,
          intfDeadVal: 40,
          FastFlood: false,
          resyncTimeoutEnable: true,
          resyncTimeout: 1,
          ttlEnable: true,
          ttl: 1,
          authType: 'NA',
          authKey: null,
          frr: false,
          frrIntfOid: null,
          networkType: null,
          md5KeyId: null
        };
      } else {
        _this.netForm = {
          ipAddress: null,
          wildcardMask: null
        };
      }

    },
    // 删除接口列表
    handleDeleteIP (type, scope) {
      let _this = this;
      if (type === 'interf') {
        _this.interfList.splice(scope.$index, 1);
      } else {
        _this.networkList.splice(scope.$index, 1);
      }
    },
    // 提交
    submitForm () {
      let _this = this;
      _this.$refs['areaForm'].validate(valid => {
        if (valid) {
          let params = {
            id: _this.form.id,
            instanceId: _this.form.instanceId,
            areaId: _this.form.areaId,
            areaType: _this.form.areaType,
            inFilter: _this.form.inFilter,
            outFilter: _this.form.outFilter,
            areaAuth: _this.form.areaAuth,
            areaKey: _this.form.areaKey,
            intfOid: _this.form.intfOid,
            // md5KeyId: this.form.md5KeyId
          };
          if (_this.form.areaType === 'Stub') {
            params.stubDefCost = _this.form.stubDefCost;
            params.stubNoSum = _this.form.stubNoSum;
          } else if (_this.form.areaType === 'NSSA') {
            params.nssaSuppress = _this.form.nssaSuppress;
            params.nssaDefaultType7 = _this.form.nssaDefaultType7;
            params.nssaMetric = _this.form.nssaMetricEnable ? _this.form.nssaMetric : 0;
            params.nssaMetricType = _this.form.nssaMetricType;
            params.nssaNoRedi = _this.form.nssaNoRedi;
            params.nssaNoSum = _this.form.nssaNoSum;
            params.nssaTransRole = _this.form.nssaTransRole;
            params.nssaTransStabIntv = _this.form.nssaTransStabIntv > -1 ? _this.form.nssaTransStabIntv : -1;
          }
          if (_this.form.id) {
            if (_this.form.interfEnble && _this.interfList.length > 0) {
              params.intfs = _this.interfList;
            }
            if (_this.form.networkEnble && _this.networkList.length > 0) {
              let netList = [];
              for (let i = 0; i < _this.networkList.length; i++) {
                netList.push({
                  ipAddress: _this.networkList[i].ipAddress,
                  wildcardMask: _this.networkList[i].wildcardMask
                });
              }
              params.networks = netList;
            }

          }
          let paras = _this.form.id ? { updates: [params] } : { adds: [params] };
          _this.$http.post({
            url: '/api/resource/nemng/command/' + _this.ne.id,
            data: {
              commandCode: 'l3proctocol.ospf.area.set',
              paras: paras
            }
          }).then(res => {
            if (res) {
              _this.$parent.refresh();
              _this.$message({
                type: 'success',
                message: _this.form.id ? '更新成功！' : '创建成功！'
              });
              _this.cancel();
            }
          });
        } else {
          _this.$message.error('请检查必填项！');
        }
      });
    },
    // // 处理接口展示
    dealPortName (oids) {
      let index = oids.indexOf('GEI');
      if (index > -1) {
        // gei-0/2
        let list = oids.split('GEI:');
        let end = list[1].indexOf('}');
        let num = list[1].substring(0, end);
        let name = 'GEI-0/' + num;
        return name;
      } else {
        return oids;
      }
    },
  }
};
</script>

<style lang='scss' scoped>
.page-content {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  background: transparent !important;
  .info {
    background: #fff;

    .title {
      font-size: 22px;
      font-weight: 500;
      padding: 15px 40px;
      border-bottom: 1px solid #eee;
    }

    .form {
      padding: 30px 0px;
      box-sizing: border-box;
    }
  }
  ::v-deep .el-input-number {
    width: 235px;
  }
  .table-btn {
    padding: 0;
  }
}
@media only screen and (max-width: $device-ipad) {
  .page-content {
    ::v-deep .el-input-number {
      width: 195px;
    }
  }
}
</style>